<template>
    <div>
        <el-dialog title="编辑客户" :visible.sync="dialogFormVisible" width="30%" style="text-align: left">
            <table style="font-weight: bold">
                <tr>
                    <td><label for="label_11">姓名: <span style="color: red">*</span></label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="name"
                            id="label_11"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_12">年龄:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="age"
                            id="label_12"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_13">家庭住址:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="addr"
                            id="label_13"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_17">爱好:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="hobby"
                            id="label_17"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_14">联系方式: <span style="color: red">*</span></label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="phone"
                            id="label_14"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_18">客户来源: </label></td>
                    <td>
                        <el-select v-model="come" placeholder="请选择" id="label_18">
                            <el-option
                                v-for="item in come_options"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"
                                style="width: 250px"
                            >
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditCustomer">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "EditCustomer",
        data() {
            return {
                dialogFormVisible: false,
                customerId: 0,
                name: "",
                age: "",
                addr: "",
                phone: "",
                hobby: "",  // 默认员工
                come: "",  // 客户来源
                come_options: [
                    {value: "1", label: "自然进店"},
                    {value: "2", label: "网络来源"},
                    {value: "3", label: "业务员来源"}
                ],
            };
        },
        methods: {
            handleCheckIsNull() {
                let errMsg = "";
                this.name === '' ? errMsg += '姓名不能为空\n' : '';
                this.phone === '' ? errMsg += '联系方式不能为空\n' : '';
                this.exchange_content === '' ? errMsg += '本次交流内容不能为空\n' : '';
                return errMsg;
            },
            handleOpen(rowData) {
                console.log(rowData)
                this.dialogFormVisible = true;
                this.customerId = rowData.id;
                this.name = rowData.name;
                this.age = rowData.age;
                this.addr = rowData.addr;
                this.phone = rowData.phone;
                this.hobby = rowData.hobby;
                this.come = rowData.come;
            },
            // 编辑用户
            handleEditCustomer() {
                let err = this.handleCheckIsNull();
                if (err !== '') {
                    this.$message({'type': 'error', 'message': err});
                    return;
                }
                let reqData = {
                    "id": this.customerId,
                    "name": this.name,
                    "age": parseInt(this.age),
                    "addr": this.addr,
                    "phone": this.phone,
                    "hobby": this.hobby,
                    "come": this.come,
                    "user_id": this.COOKIE.get('uid')
                };
                console.log("reqData: ", reqData)
                this.AXIOS.post("/api/customer/edit", reqData)
                    .then(resp => {
                        // console.log(resp)
                        let statusCode = resp.data.status;
                        if (statusCode === 1) {
                            this.$message({type: "success", message: "修改成功"});
                            this.dialogFormVisible = false;   // 关闭对话框
                            // 调用父组件中的 handleInitCustomerListData, 刷新 list 数据
                            this.$parent.handleInitCustomerListData();
                        } else {
                            this.$message({type: "error", message: resp.data.data})
                        }
                    })
                    .catch(err => {
                        this.$message({type: "error", message: err})
                    })
            },
        },
    };
</script>

<style scoped>
</style>
